<template>
    <div class="main-header">
        <div class="content">
            <div class="left-content">
                <img src="../../assets/logo-white.png" width="24" height="24"/>
                <h1 class="logo-text">预制菜溯源系统</h1>
            </div>
            <div class="right-content">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-for="(item, index) in breadcrumbs" 
                                      :key="index"
                                      :to="item.path">
                        {{ item.title }}
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <div class="user-info">
                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            <img :src="avatar" class="avatar">
                            <span class="username">{{ userName }}</span>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人设置</el-dropdown-item>
                            <el-dropdown-item divided @click.native="handleLogout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    import axios from 'axios';
    
    export default {
        data() {
            return {
                breadcrumbs: []
            }
        },

        computed: mapState({
            userName: state => state.userInfo.userName || '管理员',
            avatar: state => state.userInfo.avatar || require('@/assets/avatar-default.png'),
            userId: state => state.userInfo.userId,
            phone: state => state.userInfo.phone,
        }),

        watch: {
            '$route': {
                handler(route) {
                    this.getBreadcrumbs(route);
                },
                immediate: true
            }
        },

        methods: {
            getBreadcrumbs(route) {
                const matched = route.matched.filter(item => item.meta && item.meta.title);
                this.breadcrumbs = matched.map(item => ({
                    title: item.meta.title,
                    path: item.path
                }));
            },
            
            handleLogout() {
                axios.get('/api/login_out').then(response => {
                    this.$message({
                        message: response.data.info,
                        type: 'success'
                    });
                    this.$router.push('/login');
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    }
</script>

<style scoped>
    .main-header {
        position: fixed;
        top: 0;
        left: 240px;
        right: 0;
        z-index: 100;
        height: 64px;
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0,21,41,.08);
    }
    
    .content {
        display: flex;
        height: 100%;
        padding: 0 24px;
        align-items: center;
        justify-content: space-between;
    }
    
    .left-content {
        display: flex;
        align-items: center;
    }
    
    .logo-text {
        margin-left: 10px;
        color: #1f2d3d;
        font-size: 18px;
        font-weight: 500;
    }
    
    .right-content {
        display: flex;
        align-items: center;
    }
    
    .user-info {
        margin-left: 24px;
    }
    
    .el-dropdown-link {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    
    .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 8px;
    }
    
    .username {
        color: #1f2d3d;
        font-size: 14px;
    }
    
    .el-breadcrumb {
        margin-right: 24px;
    }
</style>